<!DOCTYPE html>
<%@ page contentType="text/html; charset=UTF-8"  %>
<%
	String basePath = request.getScheme()
			+ "://"
			+ request.getServerName()
			+ ":"
			+ request.getServerPort()
			+ request.getContextPath()
			+ "/";
%>
<!--写 base 标签，永远固定相对路径跳转的结果-->

<html>
<head>
	<base href="<%=basePath%>">
	<meta charset="UTF-8">
	<title>书城首页</title>
	<link type="text/css" rel="stylesheet" href="static/css/style.css">

	<script src="static/script/jquery-1.7.2.js"></script>
</head>
<body>

<div id="header">

	<span class="wel_word">叮叮网上书城</span>
	<div>
		<a href="pages/user/login.jsp">登录</a> |
		<a href="pages/user/regist.jsp">注册</a> &nbsp;&nbsp;
		<a href="pages/cart/cart.jsp">购物车</a>
		<a href="pages/manager/manager.jsp">后台管理</a>
	</div>
</div>
<div id="main">
	<div id="book">
		<div class="book_cond">
			<form action="" method="get">
				价格：<input id="min" type="text" name="min" value=""> 元 -
				<input id="max" type="text" name="max" value=""> 元
				<input type="submit" value="查询"/>
			</form>
		</div>
		<div style="text-align: center">
			<span>您的购物车中有3件商品</span>
			<div>
				您刚刚将<span style="color: red">时间简史</span>加入到了购物车中
			</div>
		</div>
		<div class="b_list">
			<div class="img_div">
				<img class="book_img" alt="" src="static/img/default.jpg"/>
			</div>
			<div class="book_info">
				<div class="book_name">
					<span class="sp1">书名:</span>
					<span class="sp2">时间简史</span>
				</div>
				<div class="book_author">
					<span class="sp1">作者:</span>
					<span class="sp2">霍金</span>
				</div>
				<div class="book_price">
					<span class="sp1">价格:</span>
					<span class="sp2">￥30.00</span>
				</div>
				<div class="book_sales">
					<span class="sp1">销量:</span>
					<span class="sp2">230</span>
				</div>
				<div class="book_amount">
					<span class="sp1">库存:</span>
					<span class="sp2">1000</span>
				</div>
				<div class="book_add">
					<button bookId="${book.id}" class="addTOcart">加入购物车</button>
				</div>
			</div>
		</div>

		<div class="b_list">
			<div class="img_div">
				<img class="book_img" alt="" src="static/img/default.jpg"/>
			</div>
			<div class="book_info">
				<div class="book_name">
					<span class="sp1">书名:</span>
					<span class="sp2">时间简史</span>
				</div>
				<div class="book_author">
					<span class="sp1">作者:</span>
					<span class="sp2">霍金</span>
				</div>
				<div class="book_price">
					<span class="sp1">价格:</span>
					<span class="sp2">￥30.00</span>
				</div>
				<div class="book_sales">
					<span class="sp1">销量:</span>
					<span class="sp2">230</span>
				</div>
				<div class="book_amount">
					<span class="sp1">库存:</span>
					<span class="sp2">1000</span>
				</div>
				<div class="book_add">
					<button>加入购物车</button>
				</div>
			</div>
		</div>

		<div class="b_list">
			<div class="img_div">
				<img class="book_img" alt="" src="static/img/default.jpg"/>
			</div>
			<div class="book_info">
				<div class="book_name">
					<span class="sp1">书名:</span>
					<span class="sp2">时间简史</span>
				</div>
				<div class="book_author">
					<span class="sp1">作者:</span>
					<span class="sp2">霍金</span>
				</div>
				<div class="book_price">
					<span class="sp1">价格:</span>
					<span class="sp2">￥30.00</span>
				</div>
				<div class="book_sales">
					<span class="sp1">销量:</span>
					<span class="sp2">230</span>
				</div>
				<div class="book_amount">
					<span class="sp1">库存:</span>
					<span class="sp2">1000</span>
				</div>
				<div class="book_add">
					<button>加入购物车</button>
				</div>
			</div>
		</div>

		<div class="b_list">
			<div class="img_div">
				<img class="book_img" alt="" src="static/img/default.jpg"/>
			</div>
			<div class="book_info">
				<div class="book_name">
					<span class="sp1">书名:</span>
					<span class="sp2">时间简史</span>
				</div>
				<div class="book_author">
					<span class="sp1">作者:</span>
					<span class="sp2">霍金</span>
				</div>
				<div class="book_price">
					<span class="sp1">价格:</span>
					<span class="sp2">￥30.00</span>
				</div>
				<div class="book_sales">
					<span class="sp1">销量:</span>
					<span class="sp2">230</span>
				</div>
				<div class="book_amount">
					<span class="sp1">库存:</span>
					<span class="sp2">1000</span>
				</div>
				<div class="book_add">
					<button>加入购物车</button>
				</div>
			</div>
		</div>
	</div>

	<div id="page_nav">
		<a href="#">首页</a>
		<a href="#">上一页</a>
		<a href="#">3</a>
		【4】
		<a href="#">5</a>
		<a href="#">下一页</a>
		<a href="#">末页</a>
		共10页，30条记录 到第<input value="4" name="pn" id="pn_input"/>页
		<input type="button" value="确定">
	</div>

</div>

<div id="bottom">
		<span>
			叮叮书城.Copyright &copy;2015
		</span>
</div>
</body>
<Script type="text/javascript">
	$(function () {
// 给加入购物车按钮绑定单击事件
		$("button.addToCart").click(function () {
			/**
			 * 在事件响应的 function 函数 中，有一个 this 对象，这个 this 对象，是当前正在响应事件的 dom 对象
			 * @type {jQuery}
			 */
			var bookId = $(this).attr("bookId");
			location.href = "http://localhost:8080/book/cartServlet?action=addItem&id=" + bookId;
		});
	});
</Script>
</html>